var capture_setting ={};

capture_setting.is_recording = false;
capture_setting.the_canvas = null;
capture_setting.btn  = null;

chrome.extension.onMessage.addListener(function(request,sender,sendResponse) {
	if(request.cmd == "refresh_progress"){
		//$(document.body).append("<div>"+"frames:"+request.prog+"</div>");
		$("#progress").remove();
		if(request.prog == -1)
			$(document.body).append("<div id=progress>"+"finished!"+"</div>");
		else
			$(document.body).append("<div id=progress>"+"frame:"+request.prog+"</div>");

	}
});


var is_recording = false;



function on_hover(e){
	console.log("hover me");

	if(this.id =="record_button")
		return;

	chrome.extension.sendMessage({"cmd":"status"},function(response){
						is_recording = response;
						if(is_recording)
								$(".record_button").each(function(){
															this.innerHTML = "stop";
														 });
						else
								$(".record_button").each(function(){
															this.innerHTML = "record";
														 });
					});

	if(this.getBoundingClientRect)
	{
		capture_setting.the_canvas = this;
		var box = this.getBoundingClientRect();

		//$(".toolbar_div").hide();


		
		if(capture_setting.btn == null){
			var scrollLeft = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
			var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;

			var abs_x = box.right+scrollLeft;
			var abs_y = box.top+scrollTop;
			var str = '<div class="toolbar_div" id="toolbar" style="position:absolute;left:'+abs_x+'px;top:'+abs_y+'px;z-index:500"><a id="record_button" class="record_button" href="javascript:void(0)">record</a></div>';
			
			$(document.body).append(str);
			capture_setting.btn = $("#toolbar")[0];

			$(".record_button").bind("click",function(){
			
				console.log("clicked");

				
				if(!is_recording)
				{
					console.log("clicked");
					this.innerHTML="stop";
					
					console.log("this"+capture_setting.the_canvas);

					//var pos = getElementAbsolutePos(capture_setting.the_canvas);
					var pos = getElementAbsolutePos(capture_setting.the_canvas);
					var msg={"cmd":"capture","url":window.location.href, "rect":[pos.x,pos.y,capture_setting.the_canvas.clientWidth,capture_setting.the_canvas.clientHeight]};
					
					chrome.extension.sendMessage(msg,function(){
						console.log("callback again");
					});
					console.log(msg);
					console.log("finished");
				}else{
					this.innerHTML="record";
					 chrome.extension.sendMessage({"cmd":"stop_capture"});
				}

				//$("#toolbar").hide();
						
			});

			
		}

	
		else
		{
			var scrollLeft = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
			var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;

			var abs_x = box.right+scrollLeft;
			var abs_y = box.top+scrollTop;

			
			 $("#toolbar").css({ "position": "absolute", "left": (abs_x-10)+"px", "top": abs_y+"px" ,"z-index":"500"});
			 $("#toolbar").fadeIn('slow',function(){});

		}
	}
}


/*$("div").bind("hover",on_hover);
$("div").mousemove(
	function(e){
		$("#toolbar").css({ "position": "absolute", "left": e.pageX+"px", "top": (e.pageY-10)+"px" ,"z-index":"500"});
	});
*/

prevElement = null;
document.addEventListener('mousemove',
    function(e){
        var elem = e.target || e.srcElement;
        if (prevElement!= null) {prevElement.classList.remove("mouseOn");}
        elem.classList.add("mouseOn");
        prevElement = elem;
    },true);

/*document.addEventListener('click',
    function(e){
		var elem = e.target || e.srcElement;
		var box = elem.getBoundingClientRect();

		console.log("clicked");

				
				if(!is_recording)
				{
					

			capture_setting.the_canvas = elem;

					var pos = getElementAbsolutePos(elem);
					var msg={"cmd":"capture","url":window.location.href, "rect":[pos.x,pos.y,capture_setting.the_canvas.clientWidth,capture_setting.the_canvas.clientHeight]};
					
					chrome.extension.sendMessage(msg,function(){
						console.log("callback again");
					});
					console.log(msg);
					console.log("finished");
				}else{
					this.innerHTML="record";
					 chrome.extension.sendMessage({"cmd":"stop_capture"});
				}

	},true);*/


	document.onclick = function(e){
		/*alert("doc clicked");*/
		var elem = e.target || e.srcElement;
		var box = elem.getBoundingClientRect();

		console.log("clicked");

				
				if(!is_recording)
				{
					

			capture_setting.the_canvas = elem;

					var pos = getElementAbsolutePos(elem);
					var msg={"cmd":"capture","url":window.location.href, "rect":[pos.x,pos.y,capture_setting.the_canvas.clientWidth,capture_setting.the_canvas.clientHeight]};
					
					chrome.extension.sendMessage(msg,function(){
						console.log("callback again");
					});
					console.log(msg);
					console.log("finished");
				}else{
					this.innerHTML="record";
					 chrome.extension.sendMessage({"cmd":"stop_capture"});
				}
	};


	/*$("canvas").each(function(){
		  this.onclick = function(){
			  alert("canvas clicked");
		  };
		});*/


/*function fix_flash() {
    // loop through every embed tag on the site
    var embeds = document.getElementsByTagName('embed');
    for(i=0; i<embeds.length; i++)  {
        embed = embeds[i];
        var new_embed;
        // everything but Firefox & Konqueror
        if(embed.outerHTML) {
            var html = embed.outerHTML;
            // replace an existing wmode parameter
            if(html.match(/wmode\s*=\s*('|")[a-zA-Z]+('|")/i))
                new_embed = html.replace(/wmode\s*=\s*('|")window('|")/i,"wmode='transparent'");
            // add a new wmode parameter
            else 
                new_embed = html.replace(/<embed\s/i,"<embed wmode='transparent' ");
            // replace the old embed object with the fixed version
            embed.insertAdjacentHTML('beforeBegin',new_embed);
            embed.parentNode.removeChild(embed);
        } else {
            // cloneNode is buggy in some versions of Safari & Opera, but works fine in FF
            new_embed = embed.cloneNode(true);
            if(!new_embed.getAttribute('wmode') || new_embed.getAttribute('wmode').toLowerCase()=='window')
                new_embed.setAttribute('wmode','transparent');
            embed.parentNode.replaceChild(new_embed,embed);
        }
    }
    // loop through every object tag on the site
    var objects = document.getElementsByTagName('object');
    for(i=0; i<objects.length; i++) {
        object = objects[i];
        var new_object;
        // object is an IE specific tag so we can use outerHTML here
        if(object.outerHTML) {
            var html = object.outerHTML;
            // replace an existing wmode parameter
            if(html.match(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")[a-zA-Z]+('|")\s*\/?\>/i))
                new_object = html.replace(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")window('|")\s*\/?\>/i,"<param name='wmode' value='transparent' />");
            // add a new wmode parameter
            else 
                new_object = html.replace(/<\/object\>/i,"<param name='wmode' value='transparent' />\n</object>");
            // loop through each of the param tags
            var children = object.childNodes;
            for(j=0; j<children.length; j++) {
				if(children[j].getAttribute('name')!=null){
                if(children[j].getAttribute('name').match(/flashvars/i)) {
                    new_object = new_object.replace(/<param\s+name\s*=\s*('|")flashvars('|")\s+value\s*=\s*('|")[^'"]*('|")\s*\/?\>/i,"<param name='flashvars' value='"+children[j].getAttribute('value')+"' />");
                }}
            }
            // replace the old embed object with the fixed versiony
            object.insertAdjacentHTML('beforeBegin',new_object);
            object.parentNode.removeChild(object);
        }
    }
}

fix_flash();*/